<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '鲜果上市',
  },
}
</route>
<template>
  <view class="w-screen overflow-hidden min-h-100vh">
    <view class="bg-#f6f6f6">
      <wd-search
        style="padding-bottom: 0px !important"
        light
        placeholder-left
        hide-cancel
        placeholder="请输入想搜的产品名"
        v-model="freshFruit.remark"
        @blur="handleQuery"
        @clear="handleQuery"
      />
      <wd-tabs v-model="tab" @change="tabChange">
        <block v-for="(item, index) in tabs" :key="index">
          <wd-tab :title="item.label">
            <view>
              <view
                class="bg-#f6f6f6 w-screen overflow-hidden min-h-100vh box-border px-20rpx py-10rpx"
              >
                <wd-row :gutter="10">
                  <wd-col :span="12">
                    <view class="mb-20rpx" v-for="(item, index) in listLeft" :key="index">
                      <image
                        v-if="item && item.fileDOList && item.fileDOList.length != 0"
                        class="w-100% h-400rpx published-img"
                        :src="item.fileDOList[0].url"
                        @click="detailProducts(item.id)"
                      ></image>
                      <view class="bg-#fff w-100% py-20rpx box-border">
                        <view @click="detailProducts(item.id)">
                          <view class="title ellipsis-3 px-20rpx">
                            {{ item.remark }}
                          </view>
                          <view
                            class="px-20rpx flex mb-10rpx mt-6rpx"
                            v-if="item && item.tag"
                            style="flex-wrap: wrap"
                          >
                            <view class="mr-10rpx" v-for="(item2, index) in item.tag" :key="index">
                              <wd-tag
                                style="min-width: 40rpx; font-size: 18rpx; text-align: center"
                                color="#F72323"
                                bg-color="#EE2A02"
                                plain
                              >
                                {{ item2 }}
                              </wd-tag>
                            </view>
                          </view>
                        </view>
                        <view class="flex items-center justify-between px-20rpx">
                          <view>
                            <span class="per-money mr-4rpx">{{ item.quantity }}</span>
                            <span class="per-capita">Kg</span>
                          </view>
                        </view>
                      </view>
                    </view>
                  </wd-col>
                  <wd-col :span="12">
                    <view class="mb-20rpx" v-for="(item, index) in listRight" :key="index">
                      <image
                        v-if="item && item.fileDOList && item.fileDOList.length != 0"
                        class="w-100% h-400rpx published-img"
                        :src="item.fileDOList[0].url"
                        @click="detailProducts(item.id)"
                      ></image>
                      <view class="bg-#fff w-100% py-20rpx box-border">
                        <view @click="detailProducts(item.id)">
                          <view class="title ellipsis-3 px-20rpx">
                            {{ item.remark }}
                          </view>
                          <view
                            v-if="item && item.tag"
                            class="px-20rpx flex mb-10rpx mt-6rpx"
                            style="flex-wrap: wrap"
                          >
                            <view class="mr-10rpx" v-for="(item2, index) in item.tag" :key="index">
                              <wd-tag
                                style="min-width: 40rpx; font-size: 18rpx; text-align: center"
                                color="#F72323"
                                bg-color="#EE2A02"
                                plain
                              >
                                {{ item2 }}
                              </wd-tag>
                            </view>
                          </view>
                        </view>
                        <view class="flex items-center justify-between px-20rpx">
                          <view>
                            <span class="per-money mr-4rpx">{{ item.quantity }}</span>
                            <span class="per-capita">Kg</span>
                          </view>
                        </view>
                      </view>
                    </view>
                  </wd-col>
                </wd-row>
                <wd-loadmore v-if="list.length > 0" :state="state" @reload="loadmore" />
                <wd-status-tip v-if="max == 0" image="content" tip="暂无内容" />
              </view>
            </view>
          </wd-tab>
        </block>
      </wd-tabs>
    </view>
    <wd-fab v-model:active="active" type="warning" position="right-bottom" :draggable="true">
      <wd-button @click="addProducts" type="primary" round>新建产品</wd-button>
    </wd-fab>
  </view>
</template>

<script lang="ts" setup>
import * as getApi from '@/service/FruitMarket/index'
const tab = ref<number>(0)
const tabs = [{ label: '我要买' }, { label: '我要卖' }]
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const state = ref<string>('loading')
const max = ref<number>(60)
const active = ref<boolean>(false)
// tab选项卡切换
const tabChange = (e) => {
  tab.value = e.index
  freshFruit.pageNo = 1
  list.value = []
  listLeft.value = []
  listRight.value = []
  max.value = 60
  getFreshFruit()
}
// 获得特色鲜果分页
const list = ref([])
const listLeft = ref([])
const listRight = ref([])
const freshFruit = reactive({
  pageNo: 1,
  pageSize: 10,
  remark: '',
  demand: '我要买',
})
async function getFreshFruit() {
  switch (tab.value) {
    case 0:
      freshFruit.demand = '我要买'
      break
    case 1:
      freshFruit.demand = '我要卖'
      break
  }
  const data: any = await getApi.getfreshFruitPage({ ...freshFruit })
  list.value.push(...data.data.list)
  max.value = data.data.total
  if (data.data.list.length > 0) {
    data.data.list.forEach((item) => {
      if (item.tag) {
        item.tag = item.tag.split(',')
      }
      if (item.fileDOList) {
        item.fileDOList = item.fileDOList.reverse().map((item) => {
          item.url = `${baseurl.value}${item.url}`
          return item
        })
      }
    })
  }

  list.value.length === max.value ? (state.value = 'finished') : (state.value = 'loading')
  // 分割 list 到 listLeft 和 listRight
  listLeft.value = []
  listRight.value = []
  list.value.forEach((item, index) => {
    if (index % 2 === 0) {
      listLeft.value.push(item)
    } else {
      listRight.value.push(item)
    }
  })
}
// 新增鲜果
const addProducts = () => {
  uni.navigateTo({ url: '/pages/FruitMarket/addProducts?type=' + 'add' })
}
// 鲜果详情
const detailProducts = (id) => {
  uni.navigateTo({
    url: '/pages/FruitMarket/productDetails?id=' + id,
  })
}
/** 查询按钮操作 */
const handleQuery = () => {
  freshFruit.pageNo = 1
  list.value = []
  listLeft.value = []
  listRight.value = []
  max.value = 60
  getFreshFruit()
}
onShow(() => {
  active.value = false
  freshFruit.pageNo = 1
  list.value = []
  listLeft.value = []
  listRight.value = []
  getFreshFruit()
  uni.$on('refreshPage', refreshPage)
})
onUnload(() => {
  uni.$off('refreshPage', refreshPage)
})
function refreshPage() {
  list.value = []
  getFreshFruit()
}
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getFreshFruit()
  }, 1000)
}
onReachBottom(() => {
  if (list.value.length === max.value) {
    state.value = 'finished'
  } else if (list.value.length < max.value) {
    freshFruit.pageNo += 1
    loadmore()
  }
})
</script>
<style lang="scss" scoped>
::v-deep .wd-tabs__line {
  display: none;
}
::v-deep.wd-tabs__nav-item.is-active {
  font-weight: normal !important;
  color: #409eff !important;
  border-bottom: 6rpx solid #409eff !important;
}
::v-deep .wd-search {
  padding-bottom: 0 !important;
}
::v-deep .wd-tabs__nav {
  background: #f6f6f6 !important;
}
::v-deep .wd-tabs__nav-item {
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  height: 64rpx !important;
  font-size: 30rpx !important;
}
::v-deep .wd-tabs__nav-container {
  justify-content: space-evenly !important;
}
::v-deep .wd-tag__text {
  display: block !important;
  min-height: 14px;
  padding: 4rpx !important;
  line-height: 14px;
}

::v-deep .wd-tag {
  display: block !important;
  margin-top: 10rpx !important;
  border-radius: 8rpx;
}
.published-img {
  border-radius: 14rpx;
}
.title {
  font-size: 28rpx;
  font-weight: 500;
  line-height: 20px;
  color: #111111;
  text-align: justify;
}
.per-money {
  display: inline-block;
  font-size: 30rpx;
  font-weight: 500;
  color: #f72323;
  text-align: left;
  vertical-align: bottom;
}
.per-capita {
  display: inline-block;
  font-size: 24rpx;
  font-weight: 500;
  color: rgba(123, 123, 123, 1);
  text-align: left;
}
</style>
